<template>
  <div class="div1">
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">

      <el-card class="card1">
        <i class="el-icon-search"></i>
        <span> 筛选查询 </span>
      </el-card>
      <el-card class="class2">
        <el-input v-model="tryoutName" placeholder="试用商品名称/关键词" class="input1">
          <el-button
              slot="append"
              icon="el-icon-search"
              @click="list"
          ></el-button>
        </el-input>
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="——"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="list">筛选</el-button>
      </el-card>

      <el-card class="card2">
        <i class="el-icon-s-unfold"></i>
        <span> 试用商品列表 </span>
        <span class="span1">
        <el-button @click="add">添加试用商品</el-button>
      </span>
      </el-card>
      <el-table
          :data="typeofTable"
          style="width: 100%;">
        <el-table-column
            prop="id"
            label="序号"
        >
        </el-table-column>
        <el-table-column
            prop="cid"
            label="编号"
        >
        </el-table-column>
        <el-table-column
            prop="itemName"
            label="试用商品名称"
        >
        </el-table-column>
        <el-table-column
            label="商品货号"
            prop="ccname">
        </el-table-column>
        <el-table-column
            prop="quota"
            label="名额">
        </el-table-column>
        <el-table-column
            prop="num"
            label="申请人数">
          <!--        <el-button type="primary" plain>查看栏目</el-button>-->
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="开始时间"
        >
        </el-table-column>
        <el-table-column
            prop="stopTime"
            label="结束时间"
        >
        </el-table-column>
        <el-table-column
            label="活动状态">
          <template slot-scope="scope">
            <!--switch 开关 组件-->
            <el-switch
                @change="alterSwitch(scope.row)"
                :active-value="true"
                :inactive-value="false"
                v-model="scope.row.activeState"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column

            label="操作">
          <template slot-scope="scope">
            <!--    查看数据列表按钮      -->
            <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                       @click="view(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                       @click="delTryoutById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="check" width="70%" @close="clos">
      <el-input v-model="brandName" placeholder="品牌名称/关键词" style="width: 25%">
        <el-button
            slot="append"
            icon="el-icon-search"
            @click="getAllItem"
        ></el-button>
      </el-input>
      <el-table
          :data="itemTableData"
          style="width: 100%;">
        <el-table-column
            prop="id"
            label="序号"
        >
        </el-table-column>
        <el-table-column
            prop="itemCode"
            label="编号"
        >
        </el-table-column>
        <el-table-column
            prop="itemName"
            label="商品名称"
        >
        </el-table-column>
        <el-table-column
            label="商品图片">
          <template v-slot="s">
            <el-avatar shape="square" size="large" :src="s.row.itemImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="itemColumn"
            label="商品品牌"
        >
          <template v-slot="s">
            <el-avatar shape="square" size="large" :src="s.row.url"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="itemSellingPrice"
            label="价格/货号">
        </el-table-column>
        <el-table-column
            label="物流">
          <template v-slot="s">
            {{ s.row.itemLogisticsType1.logisticsType }}
          </template>
        </el-table-column>
        <el-table-column
            label="SKU库存">
          <template v-slot="s">
            <el-button @click="getSkuR(s.row.id)">查看SKU库存</el-button>
          </template>
        </el-table-column>
        <el-table-column
            width="180"
            label="选择">
          <template slot-scope="scope">
            <el-button @click="choice(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="chooseList">
        <el-table-column label="序号" prop="id">
        </el-table-column>
        <el-table-column label="编号" prop="scode">
        </el-table-column>
        <el-table-column label="货号" prop="itemCode">
        </el-table-column>
        <el-table-column label="商品价格" prop="itemRepertory.itemPrice">
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime">
          <template scope="s">
            <el-input v-model="s.row.startTime" type="date"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="stopTime">
          <template scope="s">
            <el-input v-model="s.row.stopTime" type="date"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="申请数量" prop="quota">
          <template scope="s">
            <el-input v-model="s.row.quota" type="text"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="试用价格" prop="repertoryId">
          <template scope="s">
            <el-input v-model="s.row.quota" type="text"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="s">
            <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                       @click="delItem(s.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="addShop">提交</el-button>
    </el-dialog>
    <el-dialog :visible.sync="viewType" width="500px">
      <el-form :model="{viewTypes}">
        <el-form-item label="分类" style="width: 300px" v-for="item in viewTypes">
          <br> {{ item.namel2 }} <br>{{ item.namel1 }}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="sukFalse" width="700px">
      <el-table :data="sukrList">
        <el-table-column prop="itemName" label="商品名称">
        </el-table-column>
        <el-table-column prop="specification" label="规格">
        </el-table-column>
        <el-table-column prop="itemRepertoryNum" label="库存数量">
        </el-table-column>
      </el-table>
      <el-button @click="sukFalse = false">返回</el-button>
    </el-dialog>
    <el-dialog :visible.sync="viewById">
      <el-form :model="getAllTryoutById">
        <el-form-item label="编号" style="width: 300px" >
          <el-input
              v-model="getAllTryoutById.id"
              autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Tryout",
  data() {
    return {
      viewById:false,
      value2: '',
      checked: false,
      sukrList: [],
      viewTypes: "",
      viewType: false,
      sukFalse: false,
      brandName: "",
      itemTableData: [],
      check: false,//查看
      tryoutName: "",
      value1: "",
      startTime: "",//开始时间
      typeofTable: [],
      stopTime: "",//结束时间
      chooseList: [],//添加的列表
      getAllTryoutById:{},//根据id查看数据
    }
  },
  methods: {
    view(row){//根据id查看数据
      this.getAllTryoutById=row
      this.viewById = true

    },
    delItem(row) {//删除添加的
      this.chooseList.splice(row.id,1)
      console.log(row.id);
    },
    clos() {//添加弹窗的关闭
      this.list()
    },
    addShop() {//添加商品
      this.$axios({
        url: "/seckill/getAllGoodsByItemId",
        method: "get",
        params:{
          itemId:this.chooseList.id
        }
      })
    },
    choice(row) {//添加里面的选择
      this.$axios({
        url: "/seckill/getAllGoodsByItemId",
        method: "get",
        params:{
          itemId:row.id
        }
      }).then(res=>{
        this.chooseList = res.data.data
        console.log(res.data.data);
      })

    },
    delTryoutById(id) {//根据id删除数据
      this.$confirm('确定要删除该商品吗？', {
        confirmButtonText: '是的',
        cancelButtonText: '稍等',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "get",
          url: "/tryout/delTryoutById",
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.getAllItem()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getSkuR(id) {//查看SKU库存
      this.sukFalse = true
      this.$axios({
        url: "item/getAllSpuR",
        method: "get",
        params: {id: id}
      }).then(res => {
        this.sukrList = res.data.data
      })
    },
    commodity(row) {//根据id查看商品分类
      this.$axios({
        url: "item/getTypeById",
        method: "get",
        params: {
          id: row.id,
        }
      }).then(res => {
        this.viewTypes = res.data.data;
        console.log(res.data.data)
      })
      this.viewType = true
    },
    getAllItem() {//商品列表全查
      this.$axios({
        url: "item/getAllItem",
        method: "get",
        params: {
          itemName: this.brandName,
          itemBrandId: this.brandId,
          status: this.stale
        }
      }).then(res => {
        this.itemTableData = res.data.data;
      })
    },
    add() {
      this.check = true
    },
    alterSwitch() {//是否上架开关组件
      this.$axios.post("/tryout/alterSwitch",
          {
            id: row.id,
            activeState: row.activeState
          }).then(res => {
        this.$message({
          type: 'success',
          message: '你成功修改了显示!'
        });
      })
    },
    list() {//试用列表全查
      this.startTime = this.value1[0]
      this.stopTime = this.value1[1]
      this.$axios({
        url: "/tryout/getAllTryout",
        method: "get",
        params: {
          tryoutName: this.tryoutName,
          startTime: this.startTime,
          stopTime: this.stopTime
        }
      }).then(res => {
        this.typeofTable = res.data.data;
      })
    }
  },
  created() {
    this.list()
    this.getAllItem()
  }

}
</script>

<style scoped>
.card1 {
  width: 100%;
  font-size: 20px;
  background: #8c939d;
}

.div1 {
  width: 100%;
}

.input1 {
  width: 300px;
  margin-right: 10%;
}

.card2 {
  font-size: 20px;
  margin-top: 20px;
  background: #8c939d;
}

.span1 {
  margin-left: 80%;
}

.box {
  width: 95%;
  height: 60vh;
  margin: 0 auto;

}
</style>